import { ModalConfirm, TableLayout } from '@/components';
import { deviceList } from '@/services/deviceMsg';
import { patientUnbindDevice } from '@/services/patientMsg';
import { message } from 'antd';
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';

const BindDeviceList = React.forwardRef((props: any, ref) => {
  const { patientId, refreshDeviceList, getChildrenSelectData ,ecgModuleItem } = props;
  const [modItem, setModItem] = useState<any>({});
  const tableLayoutRef = useRef<any>(null);
  const modalConfirmRef = useRef<any>(null);
  const [selectedKeys, setSelectedKeys] = useState<any>([]);
  const columns: any = [
    {
      title: '设备名称',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      hideInSearch: true,
    },
    {
      title: '注册状态',
      dataIndex: 'registerFlag',
      hideInSearch: true,
      render: (_: any, record: any) => (
       <div>
        {record.registerFlag == 1 ? '已注册' : '未注册'}
       </div>
      ),
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 65,
      fixed: 'right',
      render: (_: any, record: any) => (
        <div className="custom-table-option">
          <a
            className="danger"
            onClick={() => handleOption(record, 'patientUnbindDevice')}
          >
            解绑
          </a>
        </div>
      ),
    },
  ];

  const rowSelection = {
    type: 'radio',
    fixed: 'left',
    selectedRowKeys: selectedKeys,
    onChange: (keys: any, rows: any) => {
      setSelectedKeys(keys);
      getChildrenSelectData && getChildrenSelectData('device', keys); // 调用父组件的方法，传递选中的数据
    },
  };
  const getTableData = async () => {
    const res = await deviceList({
      pageNum: 1,
      pageSize: 10000,
      patientId: patientId,
    });
    if (res?.code === 200) {
      if(selectedKeys.length === 0){
        if(ecgModuleItem?.device?.id){
          setSelectedKeys([ecgModuleItem?.device?.id]);
          getChildrenSelectData && getChildrenSelectData('device', [ecgModuleItem?.device?.id]);
        }
      }
      return res.rows;
    }
    return [];
  };
  const handleOption = (row: any, key: string) => {
    setModItem({
      ...row,
      modKey: key,
    });
    if (key === 'patientUnbindDevice') {
      modalConfirmRef?.current?.handleModalShow('确定解绑该设备吗?');
    }
  };

  const modalSuccessCallback = async () => {
    if (modItem.modKey === 'patientUnbindDevice') {
      const res = await patientUnbindDevice({
        patientId: patientId,
        deviceIds: modItem.id,
      });
      if (res?.code === 200) {
        message.success('解绑成功');
        modalConfirmRef?.current?.handleModalShow();
        refreshDeviceList();
        return true;
      }
    }
  };
  const refreshList = () => {
    tableLayoutRef?.current?.tableReload();
  };
  useImperativeHandle(ref, () => ({
    refreshList,
  }));
  useEffect(() => {
    refreshList();
  }, [patientId]);
  return (
    <>
      <TableLayout
        search={false}
        ref={tableLayoutRef}
        getTableData={getTableData}
        headerTitle="患者已绑定设备"
        rowSelection={rowSelection}
        columns={columns}
        scrolly="100px"
        rowKey={'id'}
        pagination={false}
      />
      {/* 确认弹层 */}
      <ModalConfirm
        ref={modalConfirmRef}
        successCallback={modalSuccessCallback}
      />
    </>
  );
});

export default BindDeviceList;
